<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <button id="btn">关闭定时器</button>

  <script>
    /*
      定时器
        + 在前端 JS 内的代码执行是单线程(同一个时间内只能做一件事情)
        + JS 提供给我们一个 异步代码执行机制(定时器)
        + 异步代码执行机制(EventLoop)
          => 当代码执行过程中, 遇到异步代码了
          => 会把异步代码放在 事件队列池 中等待
          => 继续向后执行同步代码
          => 等到所有同步代码执行完毕, 调用栈空的时候, 再去异步事件队列池内拿到异步代码执行(先进先出)

      定时器的开启(设置)
        1. 延时定时器(炸弹定时器)
          => 语法: setTimeout(函数, 数字)
            -> 函数: 表示时间到达的时候要执行的代码
            -> 数字: 倒计时的时间(单位是 ms)
        2. 间隔定时器
          => 语法: setInterval(函数, 数字)
            -> 函数: 表示每间隔一段时间以后执行的代码
            -> 数字: 间隔的时间(单位是 ms)

      定时器的返回值
        + 两种定时器的返回值是一样的
        + 不区分定时器种类, 只是表示你是页面上的第几个定时器

      关闭定时器(销毁)
        + 销毁定时器的时候, 不区分定时器种类, 只要给出的定时器数字是对的, 就可以销毁
        + 语法:
          => clearTimeout()
          => cleatInterval()
    */

    // 1. 延时定时器
    // 2000ms 以后会执行 a 这个函数
    // console.log(new Date())
    // setTimeout(function a() {
    //   console.log('boom')
    //   console.log(new Date())
    // }, 2000)

    // 2. 间隔定时器
    // setInterval(function () {
    //   console.log(new Date())
    // }, 1000)


    // 定时器的返回值
    // var t1 = setTimeout(function () {})
    // var t2 = setInterval(function () {})

    // console.log('t1 : ', t1)
    // console.log('t2 : ', t2)


    // 关闭定时器
    var t1 = setTimeout(function () { console.log('timeout') }, 3000)
    var t2 = setInterval(function () { console.log('interval') }, 1000)

    // 点击按钮关闭定时器
    // btn 表示页面中 id 为 btn 的元素
    // onclick 表示点击在这个元素身上的时候, 执行后面的函数
    btn.onclick = function () {
      // 执行关闭定时器的代码
      // clearTimeout(t1)
      // clearTimeout(t2)

      clearInterval(t1)
      clearInterval(t2)
    }
  </script>
</body>
</html>
